{% extends "resume/base.html" %}
{% load widget_tweaks %}
{% block title %}Edit Resume{% endblock %}

{% block header_actions %}
  <button form="resume-form" type="submit" name="action" value="preview"
          class="px-3 py-1.5 text-sm border rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">Preview resume</button>
  <button form="resume-form" type="submit" name="action" value="download"
          class="px-3 py-1.5 text-sm border rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">Download PDF</button>
{% endblock %}

{% block content %}
  <div class="space-y-6">
    <section class="relative overflow-hidden rounded-3xl bg-gradient-to-r from-[#758A93] to-[#93A4AC] text-white shadow-xl">
      <div class="absolute inset-y-0 right-0 w-40 bg-[#758A93]/30 blur-3xl"></div>
      <div class="px-6 py-8 md:px-10">
        <p class="uppercase text-xs tracking-[0.2em] text-[#E6EDF2]">Resume builder</p>
        <h1 class="mt-2 text-3xl md:text-4xl font-semibold tracking-tight">Craft a story employers remember</h1>
        <p class="mt-3 max-w-2xl text-sm md:text-base text-[#E6EDF2]/90">
          Move through each section, save as you go, and preview to see how everything comes together. Tips and quick actions live on the right if you need them.
        </p>
        {% if is_fresh_profile %}
          <div class="mt-4 inline-flex items-center gap-2 rounded-full bg-white/15 px-4 py-2 text-sm text-white">
            <span>✨ Fresh canvas ready — start with your headline below.</span>
          </div>
        {% elif last_saved_display %}
          <div class="mt-4 inline-flex items-center gap-2 rounded-full bg-white/15 px-4 py-2 text-sm text-white/90">
            <span>Last saved {{ last_saved_display }}.</span>
          </div>
        {% endif %}
      </div>
    </section>

    <form id="resume-form" method="post" enctype="multipart/form-data" class="space-y-6"
          data-invalid-sections="{{ invalid_sections|join:',' }}"
          data-first-invalid-section="{{ first_invalid_section|default_if_none:'' }}">
      {% if form.errors or form.non_field_errors or ed_fs.non_form_errors or ex_fs.non_form_errors or pr_fs.non_form_errors or sk_fs.non_form_errors %}
        <div class="rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
          <p class="font-semibold">We found a few things to fix before continuing:</p>
          <ul class="mt-2 space-y-1 list-disc list-inside">
            {% for error in form.non_field_errors %}
              <li>{{ error }}</li>
            {% endfor %}
            {% for field in form.visible_fields %}
              {% for error in field.errors %}
                <li><strong>{{ field.label }}:</strong> {{ error }}</li>
              {% endfor %}
            {% endfor %}
            {% for error in ed_fs.non_form_errors %}
              <li>Education: {{ error }}</li>
            {% endfor %}
            {% for f in ed_fs %}
              {% for error in f.non_field_errors %}
                <li>Education: {{ error }}</li>
              {% endfor %}
              {% for field in f.visible_fields %}
                {% for error in field.errors %}
                  <li>Education — {{ field.label }}: {{ error }}</li>
                {% endfor %}
              {% endfor %}
            {% endfor %}
            {% for error in ex_fs.non_form_errors %}
              <li>Experience: {{ error }}</li>
            {% endfor %}
            {% for f in ex_fs %}
              {% for error in f.non_field_errors %}
                <li>Experience: {{ error }}</li>
              {% endfor %}
              {% for field in f.visible_fields %}
                {% for error in field.errors %}
                  <li>Experience — {{ field.label }}: {{ error }}</li>
                {% endfor %}
              {% endfor %}
            {% endfor %}
            {% for error in pr_fs.non_form_errors %}
              <li>Projects: {{ error }}</li>
            {% endfor %}
            {% for f in pr_fs %}
              {% for error in f.non_field_errors %}
                <li>Projects: {{ error }}</li>
              {% endfor %}
              {% for field in f.visible_fields %}
                {% for error in field.errors %}
                  <li>Projects — {{ field.label }}: {{ error }}</li>
                {% endfor %}
              {% endfor %}
            {% endfor %}
            {% for error in sk_fs.non_form_errors %}
              <li>Skills: {{ error }}</li>
            {% endfor %}
            {% for f in sk_fs %}
              {% for error in f.non_field_errors %}
                <li>Skills: {{ error }}</li>
              {% endfor %}
              {% for field in f.visible_fields %}
                {% for error in field.errors %}
                  <li>Skills — {{ field.label }}: {{ error }}</li>
                {% endfor %}
              {% endfor %}
            {% endfor %}
          </ul>
        </div>
      {% endif %}
      {% csrf_token %}
      <div class="hidden">
        {{ ed_fs.management_form }}
        {{ ex_fs.management_form }}
        {{ pr_fs.management_form }}
        {{ sk_fs.management_form }}
      </div>

      <div class="grid gap-6 xl:grid-cols-[220px_minmax(0,1fr)]">
        <!-- Left rail navigation -->
        <aside class="bg-white dark:bg-gray-950 rounded-2xl border border-gray-200 dark:border-gray-800 shadow-sm p-4 space-y-4 h-fit sticky top-24">
          <div>
            <p class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Fill section</p>
            <p class="text-sm text-gray-600 dark:text-gray-300">Work one section at a time. Use the buttons to jump.</p>
          </div>
          <nav class="space-y-2" aria-label="Resume sections">
            {% with profile_has_error=invalid_section_flags.profile %}
              <a href="#section-profile" data-section-target="profile"
                 data-has-error="{{ profile_has_error|yesno:'true,false' }}"
                 class="flex w-full items-center gap-3 rounded-xl border px-3 py-2 text-sm font-medium text-left {% if profile_has_error %}border-red-300 bg-red-50 text-red-700 hover:bg-red-100 hover:text-red-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-400{% else %}border-transparent hover:bg-[#E4EBEE] hover:text-[#758A93]{% endif %}"
                 aria-label="Contact{% if profile_has_error %} — needs attention{% endif %}">
                <span class="text-lg" aria-hidden="true">👤</span>
                <span class="flex-1">Contact</span>
                {% if profile_has_error %}
                  <span class="sr-only">Needs attention</span>
                  <span class="ml-2 inline-flex h-2.5 w-2.5 items-center justify-center rounded-full bg-red-500" aria-hidden="true"></span>
                {% endif %}
              </a>
            {% endwith %}
            {% with education_has_error=invalid_section_flags.education %}
              <a href="#section-education" data-section-target="education"
                 data-has-error="{{ education_has_error|yesno:'true,false' }}"
                 class="flex w-full items-center gap-3 rounded-xl border px-3 py-2 text-sm font-medium text-left {% if education_has_error %}border-red-300 bg-red-50 text-red-700 hover:bg-red-100 hover:text-red-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-400{% else %}border-transparent hover:bg-[#E4EBEE] hover:text-[#758A93]{% endif %}"
                 aria-label="Education{% if education_has_error %} — needs attention{% endif %}">
                <span class="text-lg" aria-hidden="true">🎓</span>
                <span class="flex-1">Education</span>
                {% if education_has_error %}
                  <span class="sr-only">Needs attention</span>
                  <span class="ml-2 inline-flex h-2.5 w-2.5 items-center justify-center rounded-full bg-red-500" aria-hidden="true"></span>
                {% endif %}
              </a>
            {% endwith %}
            {% with experience_has_error=invalid_section_flags.experience %}
              <a href="#section-experience" data-section-target="experience"
                 data-has-error="{{ experience_has_error|yesno:'true,false' }}"
                 class="flex w-full items-center gap-3 rounded-xl border px-3 py-2 text-sm font-medium text-left {% if experience_has_error %}border-red-300 bg-red-50 text-red-700 hover:bg-red-100 hover:text-red-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-400{% else %}border-transparent hover:bg-[#E4EBEE] hover:text-[#758A93]{% endif %}"
                 aria-label="Professional Experience{% if experience_has_error %} — needs attention{% endif %}">
                <span class="text-lg" aria-hidden="true">💼</span>
                <span class="flex-1">Professional Experience</span>
                {% if experience_has_error %}
                  <span class="sr-only">Needs attention</span>
                  <span class="ml-2 inline-flex h-2.5 w-2.5 items-center justify-center rounded-full bg-red-500" aria-hidden="true"></span>
                {% endif %}
              </a>
            {% endwith %}
            {% with projects_has_error=invalid_section_flags.projects %}
              <a href="#section-projects" data-section-target="projects"
                 data-has-error="{{ projects_has_error|yesno:'true,false' }}"
                 class="flex w-full items-center gap-3 rounded-xl border px-3 py-2 text-sm font-medium text-left {% if projects_has_error %}border-red-300 bg-red-50 text-red-700 hover:bg-red-100 hover:text-red-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-400{% else %}border-transparent hover:bg-[#E4EBEE] hover:text-[#758A93]{% endif %}"
                 aria-label="Projects{% if projects_has_error %} — needs attention{% endif %}">
                <span class="text-lg" aria-hidden="true">🛠️</span>
                <span class="flex-1">Projects</span>
                {% if projects_has_error %}
                  <span class="sr-only">Needs attention</span>
                  <span class="ml-2 inline-flex h-2.5 w-2.5 items-center justify-center rounded-full bg-red-500" aria-hidden="true"></span>
                {% endif %}
              </a>
            {% endwith %}
            {% with skills_has_error=invalid_section_flags.skills %}
              <a href="#section-skills" data-section-target="skills"
                 data-has-error="{{ skills_has_error|yesno:'true,false' }}"
                 class="flex w-full items-center gap-3 rounded-xl border px-3 py-2 text-sm font-medium text-left {% if skills_has_error %}border-red-300 bg-red-50 text-red-700 hover:bg-red-100 hover:text-red-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-400{% else %}border-transparent hover:bg-[#E4EBEE] hover:text-[#758A93]{% endif %}"
                 aria-label="Key Skills{% if skills_has_error %} — needs attention{% endif %}">
                <span class="text-lg" aria-hidden="true">⭐</span>
                <span class="flex-1">Key Skills</span>
                {% if skills_has_error %}
                  <span class="sr-only">Needs attention</span>
                  <span class="ml-2 inline-flex h-2.5 w-2.5 items-center justify-center rounded-full bg-red-500" aria-hidden="true"></span>
                {% endif %}
              </a>
            {% endwith %}
          </nav>
          <a href="#section-profile" class="w-full inline-flex justify-center rounded-xl bg-[#758A93] px-3 py-2 text-sm font-semibold text-white shadow hover:bg-[#667880]"
             onclick="event.preventDefault(); scrollToSection('profile');">Back to top</a>
        </aside>

        <!-- Main form content -->
        <div class="space-y-6">
          <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 rounded-2xl border border-dashed border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 px-5 py-4 shadow-sm">
            <div class="text-sm text-gray-600 dark:text-gray-400">
              Keep your progress by clicking <span class="font-semibold text-[#758A93]">Save changes</span> as you edit. You can preview or download anytime.
            </div>
            <div class="text-sm font-medium text-gray-700 dark:text-gray-300">
              {% if last_saved_display %}
                Last saved {{ last_saved_display }}
              {% else %}
                Not saved yet
              {% endif %}
            </div>
          </div>

          {% with profile_has_error=invalid_section_flags.profile %}
          <section id="section-profile" data-section="profile" tabindex="-1"
                   data-has-error="{{ profile_has_error|yesno:'true,false' }}"
                   class="bg-white dark:bg-gray-950 rounded-2xl shadow border border-gray-200 dark:border-gray-800 {% if profile_has_error %}border-red-300 ring-1 ring-red-200{% endif %}">
            <div class="px-6 py-5 border-b border-gray-100 dark:border-gray-800 flex items-start justify-between gap-4">
              <div>
                <h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Contact</h2>
                <p class="text-sm text-gray-500 dark:text-gray-400">Start with your headline and contact info.</p>
                {% if profile_has_error %}
                  <p class="mt-2 flex items-center gap-2 text-sm font-medium text-red-600">
                    <span aria-hidden="true">⚠️</span>
                    <span>Review the fields in this section below.</span>
                  </p>
                {% endif %}
              </div>
            </div>
            <div class="px-6 py-6 grid md:grid-cols-2 gap-4">
              {{ form.non_field_errors }}
              <div class="md:col-span-2">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Full name</label>
                {{ form.full_name|add_class:"mt-1 w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 focus:ring-2 focus:ring-[#758A93]/30 focus:border-[#758A93] dark:focus:ring-[#93A4AC]/40 dark:focus:border-[#A7B7BD]"|attr:"placeholder:Alex Rivera" }}
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
                {{ form.email|add_class:"mt-1 w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 focus:ring-2 focus:ring-[#758A93]/30 focus:border-[#758A93] dark:focus:ring-[#93A4AC]/40 dark:focus:border-[#A7B7BD]"|attr:"placeholder:alex@example.com" }}
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Phone</label>
                {{ form.phone|add_class:"mt-1 w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 focus:ring-2 focus:ring-[#758A93]/30 focus:border-[#758A93] dark:focus:ring-[#93A4AC]/40 dark:focus:border-[#A7B7BD]"|attr:"placeholder:(555) 123-4567" }}
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Location</label>
                {{ form.location|add_class:"mt-1 w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 focus:ring-2 focus:ring-[#758A93]/30 focus:border-[#758A93] dark:focus:ring-[#93A4AC]/40 dark:focus:border-[#A7B7BD]"|attr:"placeholder:Denver, CO" }}
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Website</label>
                {{ form.website|add_class:"mt-1 w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 focus:ring-2 focus:ring-[#758A93]/30 focus:border-[#758A93] dark:focus:ring-[#93A4AC]/40 dark:focus:border-[#A7B7BD]"|attr:"placeholder:https://alex.dev" }}
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">GitHub</label>
                {{ form.github|add_class:"mt-1 w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 focus:ring-2 focus:ring-[#758A93]/30 focus:border-[#758A93] dark:focus:ring-[#93A4AC]/40 dark:focus:border-[#A7B7BD]"|attr:"placeholder:https://github.com/alex" }}
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">LinkedIn</label>
                {{ form.linkedin|add_class:"mt-1 w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 focus:ring-2 focus:ring-[#758A93]/30 focus:border-[#758A93] dark:focus:ring-[#93A4AC]/40 dark:focus:border-[#A7B7BD]"|attr:"placeholder:https://www.linkedin.com/in/alex/" }}
              </div>
              <div class="md:col-span-2">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">About me</label>
                {{ form.summary|add_class:"mt-1 w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 focus:ring-2 focus:ring-[#758A93]/30 focus:border-[#758A93] dark:focus:ring-[#93A4AC]/40 dark:focus:border-[#A7B7BD]"|attr:"placeholder:Showcase your focus areas, impact, and favorite tools." }}
                <p class="text-xs text-gray-500 mt-1">Aim for 3–4 crisp sentences showing impact and tech stack.</p>
              </div>
              <div class="md:col-span-2">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Photo</label>
                <div class="mt-2 flex items-center gap-4">
                  <div data-photo-preview class="flex h-16 w-16 items-center justify-center rounded-full bg-[#D7E0E4] text-[#758A93] text-xl overflow-hidden">
                    {% if profile.photo %}
                      <img src="{{ profile.photo.url }}" class="h-full w-full object-cover" alt="Profile photo">
                    {% else %}
                      <span>👤</span>
                    {% endif %}
                  </div>
                  <div>
                    <label for="{{ form.photo.id_for_label }}"
                           class="inline-flex items-center gap-2 rounded-lg border border-[#758A93] px-3 py-2 text-sm font-semibold text-[#758A93] hover:bg-[#E4EBEE] cursor-pointer">
                      <span>Choose File</span>
                    </label>
                    {{ form.photo|add_class:"sr-only"|attr:"accept:image/*"|attr:"data-photo-input:1" }}
                    <p class="mt-2 text-xs text-gray-500" data-photo-filename>
                      {% if profile.photo %}{{ profile.photo.name|cut:"photos/" }}{% else %}No file selected{% endif %}
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </section>
          {% endwith %}

          {% with education_has_error=invalid_section_flags.education %}
          <section id="section-education" data-section="education" tabindex="-1"
                   data-has-error="{{ education_has_error|yesno:'true,false' }}"
                   class="bg-white dark:bg-gray-950 rounded-2xl shadow border border-gray-200 dark:border-gray-800 {% if education_has_error %}border-red-300 ring-1 ring-red-200{% endif %}">
            <div class="px-6 py-5 border-b border-gray-100 dark:border-gray-800 flex items-start justify-between gap-4">
              <div>
                <h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Education</h2>
                <p class="text-sm text-gray-500 dark:text-gray-400">List newest first and highlight standout coursework.</p>
                {% if education_has_error %}
                  <p class="mt-2 flex items-center gap-2 text-sm font-medium text-red-600">
                    <span aria-hidden="true">⚠️</span>
                    <span>Complete the required fields below before continuing.</span>
                  </p>
                {% endif %}
              </div>
              <button type="button" class="flex items-center gap-1 text-sm text-[#758A93] hover:text-[#667880]" onclick="addForm('ed')">+ Add</button>
            </div>
            <div id="ed-forms" class="px-6 py-6 space-y-5" data-wrapper-class="grid md:grid-cols-2 gap-4 p-4 rounded-2xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950/60" data-remove-row-class="md:col-span-2 flex justify-end gap-2 pt-2 border-t border-dashed border-gray-200 dark:border-gray-800">
              {% for f in ed_fs %}
                <div data-form-block class="grid md:grid-cols-2 gap-4 p-4 rounded-2xl border border-gray-200 dark:border-gray-800 bg-gray-50/60 dark:bg-gray-900/40">
                  {% for hidden in f.hidden_fields %}
                    {{ hidden }}
                  {% endfor %}
                  <div><label class="block text-sm font-medium text-gray-700 dark:text-gray-300">School</label>{{ f.school|add_class:"mt-1 w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 focus:ring-2 focus:ring-[#758A93]/30 focus:border-[#758A93] dark:focus:ring-[#93A4AC]/40 dark:focus:border-[#A7B7BD]"|attr:"placeholder:University of Colorado Boulder" }}</div>
                  <div><label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Degree</label>{{ f.degree|add_class:"mt-1 w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 focus:ring-2 focus:ring-[#758A93]/30 focus:border-[#758A93] dark:focus:ring-[#93A4AC]/40 dark:focus:border-[#A7B7BD]"|attr:"placeholder:B.S. Computer Science" }}</div>
                  <div><label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Start</label>{{ f.start|add_class:"mt-1 w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 focus:ring-2 focus:ring-[#758A93]/30 focus:border-[#758A93] dark:focus:ring-[#93A4AC]/40 dark:focus:border-[#A7B7BD]"|attr:"placeholder:Aug 2021" }}</div>
                  <div><label class="block text-sm font-medium text-gray-700 dark:text-gray-300">End</label>{{ f.end|add_class:"mt-1 w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 focus:ring-2 focus:ring-[#758A93]/30 focus:border-[#758A93] dark:focus:ring-[#93A4AC]/40 dark:focus:border-[#A7B7BD]"|attr:"placeholder:May 2025" }}</div>
                  <div class="md:col-span-2"><label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Details</label>{{ f.details|add_class:"mt-1 w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 focus:ring-2 focus:ring-[#758A93]/30 focus:border-[#758A93] dark:focus:ring-[#93A4AC]/40 dark:focus:border-[#A7B7BD]"|attr:"placeholder:Honors, scholarships, standout coursework" }}</div>
                  <div><label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Order</label>{{ f.order|add_class:"mt-1 w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 focus:ring-2 focus:ring-[#758A93]/30 focus:border-[#758A93] dark:focus:ring-[#93A4AC]/40 dark:focus:border-[#A7B7BD]"|attr:"placeholder:1" }}</div>
                <div class="md:col-span-2 flex justify-end gap-2 pt-2 border-t border-dashed border-gray-200 dark:border-gray-800">
                  <button type="button" class="px-3 py-1.5 text-sm border rounded-lg hover:bg-red-50 hover:text-red-700 dark:hover:bg-red-900/20" onclick="removeBlock(this,'ed')">Remove</button>
                  <span class="hidden">{{ f.DELETE }}</span>
                </div>
              </div>
              {% empty %}<p class="text-sm text-gray-500">No education yet.</p>{% endfor %}
            </div>
            <template id="ed-empty">
              <div data-form-block class="grid md:grid-cols-2 gap-4 p-4 rounded-2xl border border-gray-200 dark:border-gray-800 bg-gray-50/60 dark:bg-gray-900/40">
                {% for hidden in ed_fs.empty_form.hidden_fields %}
                  {{ hidden }}
                {% endfor %}
                <div><label class="block text-sm font-medium text-gray-700 dark:text-gray-300">School</label>{{ ed_fs.empty_form.school|add_class:"mt-1 w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 focus:ring-2 focus:ring-[#758A93]/30 focus:border-[#758A93] dark:focus:ring-[#93A4AC]/40 dark:focus:border-[#A7B7BD]"|attr:"placeholder:University of Colorado Boulder" }}</div>
                <div><label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Degree</label>{{ ed_fs.empty_form.degree|add_class:"mt-1 w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 focus:ring-2 focus:ring-[#758A93]/30 focus:border-[#758A93] dark:focus:ring-[#93A4AC]/40 dark:focus:border-[#A7B7BD]"|attr:"placeholder:B.S. Computer Science" }}</div>
                <div><label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Start</label>{{ ed_fs.empty_form.start|add_class:"mt-1 w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 focus:ring-2 focus:ring-[#758A93]/30 focus:border-[#758A93] dark:focus:ring-[#93A4AC]/40 dark:focus:border-[#A7B7BD]"|attr:"placeholder:Aug 2021" }}</div>
                <div><label class="block text-sm font-medium text-gray-700 dark:text-gray-300">End</label>{{ ed_fs.empty_form.end|add_class:"mt-1 w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 focus:ring-2 focus:ring-[#758A93]/30 focus:border-[#758A93] dark:focus:ring-[#93A4AC]/40 dark:focus:border-[#A7B7BD]"|attr:"placeholder:May 2025" }}</div>
                <div class="md:col-span-2"><label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Details</label>{{ ed_fs.empty_form.details|add_class:"mt-1 w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 focus:ring-2 focus:ring-[#758A93]/30 focus:border-[#758A93] dark:focus:ring-[#93A4AC]/40 dark:focus:border-[#A7B7BD]"|attr:"placeholder:Honors, scholarships, standout coursework" }}</div>
                <div><label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Order</label>{{ ed_fs.empty_form.order|add_class:"mt-1 w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 focus:ring-2 focus:ring-[#758A93]/30 focus:border-[#758A93] dark:focus:ring-[#93A4AC]/40 dark:focus:border-[#A7B7BD]"|attr:"placeholder:1" }}</div>
                <div class="md:col-span-2 flex justify-end gap-2 pt-2 border-t border-dashed border-gray-200 dark:border-gray-800">
                  <button type="button" class="px-3 py-1.5 text-sm border rounded-lg hover:bg-red-50 hover:text-red-700 dark:hover:bg-red-900/20" onclick="removeBlock(this,'ed')">Remove</button>
                  {{ ed_fs.empty_form.DELETE|add_class:"hidden" }}
                </div>
              </div>
            </template>
          </section>
          {% endwith %}

          {% with experience_has_error=invalid_section_flags.experience %}
          <section id="section-experience" data-section="experience" tabindex="-1"
                   data-has-error="{{ experience_has_error|yesno:'true,false' }}"
                   class="bg-white dark:bg-gray-950 rounded-2xl shadow border border-gray-200 dark:border-gray-800 {% if experience_has_error %}border-red-300 ring-1 ring-red-200{% endif %}">
            <div class="px-6 py-5 border-b border-gray-100 dark:border-gray-800 flex items-start justify-between gap-4">
              <div>
                <h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Professional Experience</h2>
                <p class="text-sm text-gray-500 dark:text-gray-400">Focus on outcomes, metrics, and the tools you used.</p>
                {% if experience_has_error %}
                  <p class="mt-2 flex items-center gap-2 text-sm font-medium text-red-600">
                    <span aria-hidden="true">⚠️</span>
                    <span>Fix the items flagged just below in this section.</span>
                  </p>
                {% endif %}
              </div>
              <button type="button" class="flex items-center gap-1 text-sm text-[#758A93] hover:text-[#667880]" onclick="addForm('ex')">+ Add</button>
            </div>
            <div id="ex-forms" class="px-6 py-6 space-y-5" data-wrapper-class="grid md:grid-cols-2 gap-4 p-4 rounded-2xl border border-gray-200 dark:border-gray-800 bg-gray-50/60 dark:bg-gray-900/40" data-remove-row-class="md:col-span-2 flex justify-end gap-2 pt-2 border-t border-dashed border-gray-200 dark:border-gray-800">
              {% for f in ex_fs %}
                <div data-form-block class="grid md:grid-cols-2 gap-4 p-4 rounded-2xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950/60">
                  {% for hidden in f.hidden_fields %}
                    {{ hidden }}
                  {% endfor %}
                  <div><label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Company</label>{{ f.company|add_class:"mt-1 w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 focus:ring-2 focus:ring-[#758A93]/30 focus:border-[#758A93] dark:focus:ring-[#93A4AC]/40 dark:focus:border-[#A7B7BD]"|attr:"placeholder:Acme Corp" }}</div>
                  <div><label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Role</label>{{ f.role|add_class:"mt-1 w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 focus:ring-2 focus:ring-[#758A93]/30 focus:border-[#758A93] dark:focus:ring-[#93A4AC]/40 dark:focus:border-[#A7B7BD]"|attr:"placeholder:Software Engineer" }}</div>
                  <div><label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Start</label>{{ f.start|add_class:"mt-1 w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 focus:ring-2 focus:ring-[#758A93]/30 focus:border-[#758A93] dark:focus:ring-[#93A4AC]/40 dark:focus:border-[#A7B7BD]"|attr:"placeholder:Jan 2023" }}</div>
                  <div><label class="block text-sm font-medium text-gray-700 dark:text-gray-300">End</label>{{ f.end|add_class:"mt-1 w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 focus:ring-2 focus:ring-[#758A93]/30 focus:border-[#758A93] dark:focus:ring-[#93A4AC]/40 dark:focus:border-[#A7B7BD]"|attr:"placeholder:Present" }}</div>
                  <div class="md:col-span-2"><label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Bullets <span class="text-xs text-gray-500">(one per line)</span></label>{{ f.bullets|add_class:"mt-1 w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 focus:ring-2 focus:ring-[#758A93]/30 focus:border-[#758A93] dark:focus:ring-[#93A4AC]/40 dark:focus:border-[#A7B7BD]"|attr:"placeholder:Led migration to AWS resulting in 30% lower costs\nMentored five engineers and improved onboarding" }}</div>
                  <div><label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Order</label>{{ f.order|add_class:"mt-1 w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 focus:ring-2 focus:ring-[#758A93]/30 focus:border-[#758A93] dark:focus:ring-[#93A4AC]/40 dark:focus:border-[#A7B7BD]"|attr:"placeholder:1" }}</div>
                  <div class="md:col-span-2 flex justify-end gap-2 pt-2 border-t border-dashed border-gray-200 dark:border-gray-800">
                    <button type="button" class="px-3 py-1.5 text-sm border rounded-lg hover:bg-red-50 hover:text-red-700 dark:hover:bg-red-900/20" onclick="removeBlock(this,'ex')">Remove</button>
                    <span class="hidden">{{ f.DELETE }}</span>
                  </div>
                </div>
              {% empty %}<p class="text-sm text-gray-500">No experience yet.</p>{% endfor %}
            </div>
            <template id="ex-empty">
              <div data-form-block class="grid md:grid-cols-2 gap-4 p-4 rounded-2xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950/60">
                {% for hidden in ex_fs.empty_form.hidden_fields %}
                  {{ hidden }}
                {% endfor %}
                <div><label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Company</label>{{ ex_fs.empty_form.company|add_class:"mt-1 w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 focus:ring-2 focus:ring-[#758A93]/30 focus:border-[#758A93] dark:focus:ring-[#93A4AC]/40 dark:focus:border-[#A7B7BD]"|attr:"placeholder:Acme Corp" }}</div>
                <div><label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Role</label>{{ ex_fs.empty_form.role|add_class:"mt-1 w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 focus:ring-2 focus:ring-[#758A93]/30 focus:border-[#758A93] dark:focus:ring-[#93A4AC]/40 dark:focus:border-[#A7B7BD]"|attr:"placeholder:Software Engineer" }}</div>
                <div><label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Start</label>{{ ex_fs.empty_form.start|add_class:"mt-1 w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 focus:ring-2 focus:ring-[#758A93]/30 focus:border-[#758A93] dark:focus:ring-[#93A4AC]/40 dark:focus:border-[#A7B7BD]"|attr:"placeholder:Jan 2023" }}</div>
                <div><label class="block text-sm font-medium text-gray-700 dark:text-gray-300">End</label>{{ ex_fs.empty_form.end|add_class:"mt-1 w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 focus:ring-2 focus:ring-[#758A93]/30 focus:border-[#758A93] dark:focus:ring-[#93A4AC]/40 dark:focus:border-[#A7B7BD]"|attr:"placeholder:Present" }}</div>
                <div class="md:col-span-2"><label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Bullets <span class="text-xs text-gray-500">(one per line)</span></label>{{ ex_fs.empty_form.bullets|add_class:"mt-1 w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 focus:ring-2 focus:ring-[#758A93]/30 focus:border-[#758A93] dark:focus:ring-[#93A4AC]/40 dark:focus:border-[#A7B7BD]"|attr:"placeholder:Led migration to AWS resulting in 30% lower costs\nMentored five engineers and improved onboarding" }}</div>
                <div><label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Order</label>{{ ex_fs.empty_form.order|add_class:"mt-1 w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 focus:ring-2 focus:ring-[#758A93]/30 focus:border-[#758A93] dark:focus:ring-[#93A4AC]/40 dark:focus:border-[#A7B7BD]"|attr:"placeholder:1" }}</div>
                <div class="md:col-span-2 flex justify-end gap-2 pt-2 border-t border-dashed border-gray-200 dark:border-gray-800">
                  <button type="button" class="px-3 py-1.5 text-sm border rounded-lg hover:bg-red-50 hover:text-red-700 dark:hover:bg-red-900/20" onclick="removeBlock(this,'ex')">Remove</button>
                  {{ ex_fs.empty_form.DELETE|add_class:"hidden" }}
                </div>
              </div>
            </template>
          </section>
          {% endwith %}

          {% with projects_has_error=invalid_section_flags.projects %}
          <section id="section-projects" data-section="projects" tabindex="-1"
                   data-has-error="{{ projects_has_error|yesno:'true,false' }}"
                   class="bg-white dark:bg-gray-950 rounded-2xl shadow border border-gray-200 dark:border-gray-800 {% if projects_has_error %}border-red-300 ring-1 ring-red-200{% endif %}">
            <div class="px-6 py-5 border-b border-gray-100 dark:border-gray-800 flex items-start justify-between gap-4">
              <div>
                <h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Projects</h2>
                <p class="text-sm text-gray-500 dark:text-gray-400">Showcase the impact, your role, and the tech stack.</p>
                {% if projects_has_error %}
                  <p class="mt-2 flex items-center gap-2 text-sm font-medium text-red-600">
                    <span aria-hidden="true">⚠️</span>
                    <span>Address the highlighted project details below.</span>
                  </p>
                {% endif %}
              </div>
              <button type="button" class="flex items-center gap-1 text-sm text-[#758A93] hover:text-[#667880]" onclick="addForm('pr')">+ Add</button>
            </div>
            <div id="pr-forms" class="px-6 py-6 space-y-5" data-wrapper-class="grid md:grid-cols-2 gap-4 p-4 rounded-2xl border border-gray-200 dark:border-gray-800 bg-gray-50/60 dark:bg-gray-900/40" data-remove-row-class="md:col-span-2 flex justify-end gap-2 pt-2 border-t border-dashed border-gray-200 dark:border-gray-800">
              {% for f in pr_fs %}
                <div data-form-block class="grid md:grid-cols-2 gap-4 p-4 rounded-2xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950/60">
                  {% for hidden in f.hidden_fields %}
                    {{ hidden }}
                  {% endfor %}
                  <div><label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Name</label>{{ f.name|add_class:"mt-1 w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 focus:ring-2 focus:ring-[#758A93]/30 focus:border-[#758A93] dark:focus:ring-[#93A4AC]/40 dark:focus:border-[#A7B7BD]"|attr:"placeholder:Serverless Resume Builder" }}</div>
                  <div><label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Link</label>{{ f.link|add_class:"mt-1 w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 focus:ring-2 focus:ring-[#758A93]/30 focus:border-[#758A93] dark:focus:ring-[#93A4AC]/40 dark:focus:border-[#A7B7BD]"|attr:"placeholder:https://example.com" }}</div>
                  <div class="md:col-span-2"><label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Description</label>{{ f.description|add_class:"mt-1 w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 focus:ring-2 focus:ring-[#758A93]/30 focus:border-[#758A93] dark:focus:ring-[#93A4AC]/40 dark:focus:border-[#A7B7BD]"|attr:"placeholder:Brief impact-focused summary" }}</div>
                  <div class="md:col-span-2"><label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Tech</label>{{ f.tech|add_class:"mt-1 w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 focus:ring-2 focus:ring-[#758A93]/30 focus:border-[#758A93] dark:focus:ring-[#93A4AC]/40 dark:focus:border-[#A7B7BD]"|attr:"placeholder:Python / AWS / React" }}</div>
                  <div><label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Order</label>{{ f.order|add_class:"mt-1 w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 focus:ring-2 focus:ring-[#758A93]/30 focus:border-[#758A93] dark:focus:ring-[#93A4AC]/40 dark:focus:border-[#A7B7BD]"|attr:"placeholder:1" }}</div>
                  <div class="md:col-span-2 flex justify-end gap-2 pt-2 border-t border-dashed border-gray-200 dark:border-gray-800">
                    <button type="button" class="px-3 py-1.5 text-sm border rounded-lg hover:bg-red-50 hover:text-red-700 dark:hover:bg-red-900/20" onclick="removeBlock(this,'pr')">Remove</button>
                    <span class="hidden">{{ f.DELETE }}</span>
                  </div>
                </div>
              {% empty %}<p class="text-sm text-gray-500">No projects yet.</p>{% endfor %}
            </div>
            <template id="pr-empty">
              <div data-form-block class="grid md:grid-cols-2 gap-4 p-4 rounded-2xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950/60">
                {% for hidden in pr_fs.empty_form.hidden_fields %}
                  {{ hidden }}
                {% endfor %}
                <div><label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Name</label>{{ pr_fs.empty_form.name|add_class:"mt-1 w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 focus:ring-2 focus:ring-[#758A93]/30 focus:border-[#758A93] dark:focus:ring-[#93A4AC]/40 dark:focus:border-[#A7B7BD]"|attr:"placeholder:Serverless Resume Builder" }}</div>
                <div><label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Link</label>{{ pr_fs.empty_form.link|add_class:"mt-1 w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 focus:ring-2 focus:ring-[#758A93]/30 focus:border-[#758A93] dark:focus:ring-[#93A4AC]/40 dark:focus:border-[#A7B7BD]"|attr:"placeholder:https://example.com" }}</div>
                <div class="md:col-span-2"><label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Description</label>{{ pr_fs.empty_form.description|add_class:"mt-1 w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 focus:ring-2 focus:ring-[#758A93]/30 focus:border-[#758A93] dark:focus:ring-[#93A4AC]/40 dark:focus:border-[#A7B7BD]"|attr:"placeholder:Brief impact-focused summary" }}</div>
                <div class="md:col-span-2"><label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Tech</label>{{ pr_fs.empty_form.tech|add_class:"mt-1 w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 focus:ring-2 focus:ring-[#758A93]/30 focus:border-[#758A93] dark:focus:ring-[#93A4AC]/40 dark:focus:border-[#A7B7BD]"|attr:"placeholder:Python / AWS / React" }}</div>
                <div><label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Order</label>{{ pr_fs.empty_form.order|add_class:"mt-1 w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 focus:ring-2 focus:ring-[#758A93]/30 focus:border-[#758A93] dark:focus:ring-[#93A4AC]/40 dark:focus:border-[#A7B7BD]"|attr:"placeholder:1" }}</div>
                <div class="md:col-span-2 flex justify-end gap-2 pt-2 border-t border-dashed border-gray-200 dark:border-gray-800">
                  <button type="button" class="px-3 py-1.5 text-sm border rounded-lg hover:bg-red-50 hover:text-red-700 dark:hover:bg-red-900/20" onclick="removeBlock(this,'pr')">Remove</button>
                  {{ pr_fs.empty_form.DELETE|add_class:"hidden" }}
                </div>
              </div>
            </template>
          </section>
          {% endwith %}

          {% with skills_has_error=invalid_section_flags.skills %}
          <section id="section-skills" data-section="skills" tabindex="-1"
                   data-has-error="{{ skills_has_error|yesno:'true,false' }}"
                   class="bg-white dark:bg-gray-950 rounded-2xl shadow border border-gray-200 dark:border-gray-800 {% if skills_has_error %}border-red-300 ring-1 ring-red-200{% endif %}">
            <div class="px-6 py-5 border-b border-gray-100 dark:border-gray-800 flex items-start justify-between gap-4">
              <div>
                <h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Key Skills</h2>
                <p class="text-sm text-gray-500 dark:text-gray-400">Group by strengths and highlight proficiency.</p>
                {% if skills_has_error %}
                  <p class="mt-2 flex items-center gap-2 text-sm font-medium text-red-600">
                    <span aria-hidden="true">⚠️</span>
                    <span>Update the required skill entries below to continue.</span>
                  </p>
                {% endif %}
              </div>
              <button type="button" class="flex items-center gap-1 text-sm text-[#758A93] hover:text-[#667880]" onclick="addForm('sk')">+ Add</button>
            </div>
            <div id="sk-forms" class="px-6 py-6 space-y-5" data-wrapper-class="grid md:grid-cols-3 gap-4 p-4 rounded-2xl border border-gray-200 dark:border-gray-800 bg-gray-50/60 dark:bg-gray-900/40" data-remove-row-class="md:col-span-3 flex justify-end gap-2 pt-2 border-t border-dashed border-gray-200 dark:border-gray-800">
              {% for f in sk_fs %}
                <div data-form-block class="grid md:grid-cols-3 gap-4 p-4 rounded-2xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950/60">
                  {% for hidden in f.hidden_fields %}
                    {{ hidden }}
                  {% endfor %}
                  <div><label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Name</label>{{ f.name|add_class:"mt-1 w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 focus:ring-2 focus:ring-[#758A93]/30 focus:border-[#758A93] dark:focus:ring-[#93A4AC]/40 dark:focus:border-[#A7B7BD]"|attr:"placeholder:AWS" }}</div>
                  <div><label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Level</label>{{ f.level|add_class:"mt-1 w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 focus:ring-2 focus:ring-[#758A93]/30 focus:border-[#758A93] dark:focus:ring-[#93A4AC]/40 dark:focus:border-[#A7B7BD]"|attr:"placeholder:Advanced" }}</div>
                  <div class="grid grid-cols-2 gap-3 items-end">
                    <div><label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Order</label>{{ f.order|add_class:"mt-1 w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 focus:ring-2 focus:ring-[#758A93]/30 focus:border-[#758A93] dark:focus:ring-[#93A4AC]/40 dark:focus:border-[#A7B7BD]"|attr:"placeholder:1" }}</div>
                    <div class="flex justify-end items-center gap-2">
                      <button type="button" class="px-3 py-1.5 text-sm border rounded-lg hover:bg-red-50 hover:text-red-700 dark:hover:bg-red-900/20" onclick="removeBlock(this,'sk')">Remove</button>
                      <span class="hidden">{{ f.DELETE }}</span>
                    </div>
                  </div>
                </div>
              {% empty %}<p class="text-sm text-gray-500">Add a few core skills.</p>{% endfor %}
            </div>
            <template id="sk-empty">
              <div data-form-block class="grid md:grid-cols-3 gap-4 p-4 rounded-2xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950/60">
                {% for hidden in sk_fs.empty_form.hidden_fields %}
                  {{ hidden }}
                {% endfor %}
                <div><label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Name</label>{{ sk_fs.empty_form.name|add_class:"mt-1 w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 focus:ring-2 focus:ring-[#758A93]/30 focus:border-[#758A93] dark:focus:ring-[#93A4AC]/40 dark:focus:border-[#A7B7BD]"|attr:"placeholder:AWS" }}</div>
                <div><label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Level</label>{{ sk_fs.empty_form.level|add_class:"mt-1 w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 focus:ring-2 focus:ring-[#758A93]/30 focus:border-[#758A93] dark:focus:ring-[#93A4AC]/40 dark:focus:border-[#A7B7BD]"|attr:"placeholder:Advanced" }}</div>
                <div class="grid grid-cols-2 gap-3 items-end">
                  <div><label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Order</label>{{ sk_fs.empty_form.order|add_class:"mt-1 w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 focus:ring-2 focus:ring-[#758A93]/30 focus:border-[#758A93] dark:focus:ring-[#93A4AC]/40 dark:focus:border-[#A7B7BD]"|attr:"placeholder:1" }}</div>
                  <div class="flex justify-end items-center gap-2">
                    <button type="button" class="px-3 py-1.5 text-sm border rounded-lg hover:bg-red-50 hover:text-red-700 dark:hover:bg-red-900/20" onclick="removeBlock(this,'sk')">Remove</button>
                    {{ sk_fs.empty_form.DELETE|add_class:"hidden" }}
                  </div>
                </div>
              </div>
            </template>
          </section>
          {% endwith %}

          <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 rounded-2xl bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 px-6 py-5 shadow">
            <div>
              <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Ready to preview?</h3>
              <p class="text-sm text-gray-500 dark:text-gray-400">Save your changes, then open the preview to see how everything looks.</p>
            </div>
            <div class="flex flex-col sm:flex-row gap-3">
              <button type="submit" name="action" value="preview"
                      class="px-4 py-2 border border-[#758A93] text-[#758A93] rounded-lg text-center text-sm font-medium hover:bg-[#E4EBEE]">Preview resume</button>
              <button type="submit" name="action" value="download"
                      class="px-4 py-2 border border-[#758A93] text-[#758A93] rounded-lg text-center text-sm font-medium hover:bg-[#E4EBEE]">Download PDF</button>
              <button type="submit" name="action" value="save"
                      class="px-4 py-2 bg-[#758A93] text-white rounded-lg text-sm font-semibold shadow hover:bg-[#667880]">Save changes</button>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>

  <script>
    const sectionButtons = Array.from(document.querySelectorAll('[data-section-target]'));
    sectionButtons.forEach(btn => {
      if (!btn.dataset.baseClasses) {
        btn.dataset.baseClasses = btn.className;
      }
    });
    function setActiveSection(target) {
      sectionButtons.forEach(btn => {
        const baseClasses = btn.dataset.baseClasses || '';
        if (btn.dataset.sectionTarget === target) {
          btn.className = `${baseClasses} bg-[#758A93] text-white shadow border-[#758A93]`;
        } else {
          btn.className = baseClasses;
        }
      });
    }
    function scrollToSection(target, options = {}) {
      const section = document.querySelector(`[data-section="${target}"]`);
      if (!section) return;
      const { focus = false } = options;
      setActiveSection(target);
      section.scrollIntoView({ behavior: 'smooth', block: 'start' });
      window.setTimeout(() => window.scrollBy({ top: -80, left: 0, behavior: 'smooth' }), 160);
      if (focus) {
        window.setTimeout(() => {
          section.focus({ preventScroll: true });
          section.classList.add('animate-pulse');
          window.setTimeout(() => section.classList.remove('animate-pulse'), 1200);
        }, 220);
      }
    }
    sectionButtons.forEach(btn => {
      btn.addEventListener('click', (event) => {
        event.preventDefault();
        scrollToSection(btn.dataset.sectionTarget);
      });
    });
    if ('IntersectionObserver' in window) {
      const observer = new IntersectionObserver(entries => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            setActiveSection(entry.target.dataset.section);
          }
        });
      }, { rootMargin: '-45% 0px -45% 0px', threshold: 0.2 });
      document.querySelectorAll('[data-section]').forEach(section => observer.observe(section));
      const firstSection = document.querySelector('[data-section]');
      if (firstSection) {
        setActiveSection(firstSection.dataset.section);
      }
    } else if (sectionButtons.length) {
      setActiveSection(sectionButtons[0].dataset.sectionTarget);
    }

    const resumeForm = document.getElementById('resume-form');
    const invalidSections = resumeForm?.dataset.invalidSections
      ? resumeForm.dataset.invalidSections.split(',').filter(Boolean)
      : [];
    const firstInvalidSection = resumeForm?.dataset.firstInvalidSection || '';
    if (invalidSections.length && firstInvalidSection) {
      requestAnimationFrame(() => {
        scrollToSection(firstInvalidSection, { focus: true });
      });
    }

    const photoInput = document.querySelector('[data-photo-input]');
    if (photoInput) {
      const fileNameHolder = document.querySelector('[data-photo-filename]');
      const previewHolder = document.querySelector('[data-photo-preview]');
      const defaultFileName = fileNameHolder ? fileNameHolder.textContent.trim() : 'No file selected';
      const defaultPreview = previewHolder ? previewHolder.innerHTML : '';

      photoInput.addEventListener('change', event => {
        const file = event.target.files && event.target.files[0];
        if (!file) {
          if (fileNameHolder) {
            fileNameHolder.textContent = defaultFileName || 'No file selected';
          }
          if (previewHolder) {
            previewHolder.innerHTML = defaultPreview;
          }
          return;
        }

        if (fileNameHolder) {
          fileNameHolder.textContent = file.name;
        }

        if (previewHolder) {
          const reader = new FileReader();
          reader.onload = e => {
            previewHolder.innerHTML = '';
            const img = document.createElement('img');
            img.alt = 'Photo preview';
            img.src = e.target?.result || '';
            img.className = 'h-full w-full object-cover';
            previewHolder.appendChild(img);
          };
          reader.readAsDataURL(file);
        }
      });
    }

    function addForm(prefix) {
      const totalInput = document.querySelector(`input[name="${prefix}-TOTAL_FORMS"]`);
      if (!totalInput) return;
      const index = parseInt(totalInput.value, 10);
      if (Number.isNaN(index)) return;
      const templateEl = document.getElementById(`${prefix}-empty`);
      const target = document.getElementById(`${prefix}-forms`);
      if (!templateEl || !target) return;
      const html = templateEl.innerHTML.replaceAll('__prefix__', index);
      const tempContainer = document.createElement('div');
      tempContainer.innerHTML = html.trim();
      const newBlock = tempContainer.firstElementChild;
      if (!newBlock) return;
      target.appendChild(newBlock);
      totalInput.value = index + 1;
    }
    function removeBlock(btn, prefix) {
      const block = btn.closest('[data-form-block]');
      if (!block) return;
      const del = block.querySelector('input[name$="DELETE"]');
      if (del) {
        del.checked = true;
        block.classList.add('opacity-40');
        block.style.display = 'none';
        return;
      }
      block.remove();
    }
  </script>
{% endblock %}

{% load static %}
{% comment %}
The filter add_class is a tiny helper; if you do not have it, either:
  a) add django-widget-tweaks (pip install django-widget-tweaks) and {% load widget_tweaks %}, or
  b) remove `|add_class:"..."` and rely on default styling (still looks good).
{% endcomment %}